<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<!-- 
	 computed vs methods:
	 计算属性是基于它们的响应式依赖(使用到data)进行缓存的，
	 只在相关响应式依赖发生改变时它们才会重新求值。
	 
	 computed: {},
	 watch: {}
	 -->
	<div id="app">
		<h1>{{ msg }}</h1>
		<hr>
		<!-- bad
		<h2>{{ msg.split("").reverse().join('') }}</h2>
		<p>{{ msg.split("").reverse().join('') }}</p>
		 -->
		<hr>
		<h2>{{ reversedMsg }}</h2>
		<h3>Methods: {{ reversedMsg1() }}</h3>
		<p>{{ list }}</p>
		<hr>
		<p>{{ filterList }}</p>
		<hr>
		<p>Methods: {{ filterList1() }}</p>
		<hr>
		<h1>{{ now }}</h1>
		<h2>{{ now1() }}</h2>
		<h4>fullName: {{ fullName }}</h4>
	</div>
	
	<script src="vue.js"></script>
	<script>
		
		const app = new Vue({
			data: {
				msg: "Hello Vue: computed！",
				list: ['123', 23, true, 11, function() {}],
				firstName: '张',
				lastName: '三'
			},
			// 计算属性
			computed: {
				/*fullName() {
					return this.firstName + ' ' + this.lastName
				},*/
				fullName: {
					get: function() {
						return this.firstName + ' ' + this.lastName
					},
					set: function(newValue) {
						console.log('set:', newValue)
						const names = newValue.split(' ')
						this.firstName = names[0]
						this.lastName = names[names.length - 1]
					}
				},
				now() {
					return Date.now()
				},
				reversedMsg() {
					return this.msg.split('').reverse().join(',')
				},
				filterList() {
					return this.list.filter((item) => typeof(item) === 'number')
				}
			},
			// 侦听器
			watch: { // 监听data的变化
				// msg(修改后的值, 修改之前的值) {
				msg(current, before) { // 只有当data.msg发生变化的时候，才会调用
					console.log('current:', current)
					console.log('before:', before)
				},
				list(current, before) {
					console.log('current:', current.length)
					console.log('before:', before.length)
				}
			},
			methods: {
				now1() {
					return Date.now()
				},
				reversedMsg1() {
					return this.msg.split('').reverse().join('')
				},
				filterList1() {
					return this.list.filter((item) => typeof(item) === 'number')
				}
			},
		}).$mount("#app")
	</script>
</body>
</html>